<template>
  <AppDialogForm
    title="修改订单"
    :confirm="handleSubmit"
    @closed="handleDialogClosed"
    @open="handleDialogOpen"
  >
    <el-form
      ref="form"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="loading"
    >
      <el-form-item label="订单编号">
        <p>{{ formData.order_number }}</p>
      </el-form-item>
      
      <el-form-item label="订单价格">
        <p>{{ formData.order_price }}</p>
      </el-form-item>

      <el-form-item label="是否付款" prop="pay_status">
        <el-radio-group v-model="formData.pay_status">
          <el-radio label="0">未付款</el-radio>
          <el-radio label="1">已付款</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="支付方式" prop="order_pay" v-show="formData.pay_status === '1'">
        <el-radio-group v-model="formData.order_pay">
          <el-radio label="0">未支付</el-radio>
          <el-radio label="1">支付宝</el-radio>
          <el-radio label="2">微信</el-radio>
          <el-radio label="3">银行卡</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="是否发货" prop="is_send" v-show="formData.pay_status === '1'">
        <el-radio-group v-model="formData.is_send">
          <el-radio label="否">未发货</el-radio>
          <el-radio label="是">已经发货</el-radio>
        </el-radio-group>
      </el-form-item>

    </el-form>
  </AppDialogForm>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { editGoods } from "@/api/orders.js";

const props = defineProps({
  ordersInfo: {
    type: Object,
    default: () => {},
  }
});
const emit = defineEmits(["success"]);
const form = ref(null);
const loading = ref(false);
const formData = ref({
  pay_status: "",
  order_pay: "",
  is_send: ""
});
const formRules = {
  pay_status: [{ required: true, message: "请选择是否付款", trigger: "change" }],
  order_pay: [{ required: true, message: "请选择支付方式", trigger: "change" }],
  is_send: [{ required: true, message: "请选择是否发货", trigger: "change" }]
};

const handleDialogOpen = () => {
  if (!props.ordersInfo.order_id) {
    return;
  }
  formData.value = { ...props.ordersInfo };
};

const handleSubmit = async () => {
  const valid = await form.value.validate();
  if (!valid) {
    return;
  }
  // 更新
  await editGoods(props.ordersInfo.order_id, formData.value).finally(() => {
    loading.value = false;
  });
  ElMessage.success("修改成功");
  emit("success");
};

const handleDialogClosed = () => {
  form.value.clearValidate(); // 清除验证结果
  form.value.resetFields(); // 清除表单数据
  formData.value = {
    pay_status: "",
    order_pay: "",
    is_send: ""
  };
};

</script>

<style lang="scss" scoped>

</style>
